<template>
  <transition name="slide">
	<div class="addrlist">
      <header-common :title="title"></header-common>
        <section>
            <div class="list">
                <div class="info">
                    <div class="name">王先生</div>
                    <div class="pa">
                        <div class="phone">13517001709</div>
                        <div class="address">北京市海淀区过偶记电光火石离开过后收到了更好看</div>
                    </div>
                </div>
                <div class="check">
                    <div class="checkbox"><i class="icon-font icon-checkbox">&#xe670;</i>设为默认地址</div>
                    <div class="e"></div>
                    <div class="edit">
                        <!-- <b></b> -->
                        <i class="icon-font icon-edit">&#xe62f;</i> 
                    </div>
                    <div class="delete"  @click="showConfirm">
                        <!-- <span></span> -->
                        <i class="icon-font icon-delete">&#xe69d;</i> 
                    </div>
                </div>
            </div>
        </section>   
        <div class="footer"><div class="btn" @click="returnNewaddr">新建收货地址</div></div>  
        <confirm ref="confirm" text="确定要删除该收货地址吗?"></confirm> 
        <router-view></router-view>    
	</div>
    
</transition>		
</template>
<script>
import HeaderCommon from 'base/header-common/header-common'
import Confirm from 'base/confirm/confirm'
export default{
    data() {
      return {
        title:'收货地址'        
      }
    },    
    computed:{
    },
    created(){
    },
    methods:{
      returnNewaddr() {
        this.$router.push({
          path: `/addrList/newaddr`
        })
      },
      showConfirm() {
        this.$refs.confirm.show()
      },                
    },
    components: {HeaderCommon,Confirm}
  }	
</script>
<style scoped lang='scss' type="text/css">
  @import "~common/scss/variable.scss";
  @import "~common/scss/mixin.scss";
.addrlist{
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
}
  .slide-enter-active,.slide-leave-active{
    transition:all 0.3s;
  }
  .slide-enter,.slide-leave-to{
    transform:translate3d(100%,0,0);
  } 

.list{
    color:$color-text-d;
    font-size:$font-size-small;
    padding-top:15px;
}
.address{
    color:$color-text-ll;
}
.name,.phone{
    font-size:$font-size-medium;
}
.info{
    margin-left:15px;
    padding-right:15px;
    padding-bottom:6px;
    border-bottom:1px solid #e7e7e7;
    display:flex;
    display:-webkit-flex;
}
.name{
    flex:1;
    line-height:20px;
}
.pa{
    flex:4;
}
.phone{
    height:25px;
}
.address{
    line-height:20px;
}
.check{
    display:flex;
    display:-webkit-flex;
    border-bottom:1px solid #e7e7e7;
    height:35px;
    line-height:35px;
    padding:0 15px;
}
.checkbox{
    flex:2;
}
.e{
    flex:2;
}
.edit,.delete{
    flex:1;
    text-align:center;
    position: relative;
}
.checkbox>i{
    display:inline-block;
    width:13px;
    height:13px;
    padding-right:7px;
    position:relative;
    top:1px;
}
.icon-edit,.icon-delete{
    position: relative;
    font-size:14px;
    @include extend-click;
}
.footer{
    height:50px;
    position:fixed;
    width:100%;
    bottom:0;
}
.footer .btn {
    color: #fff;
    text-align: center;
    background-color: $color-sub-theme;
    width: 84%;
    margin: 0 auto;
    border-radius: 3px;
    height: 40px;
    line-height: 40px;
    letter-spacing:1px;
}
</style>